<template>
  <div class="home">
    <a-card class="home-preview">
      <div class="home-preview-card">
        <div class="card-item" v-for="(item, index) in list" :key="index">
          <div class="card-item-title">
            <span>{{ item.title }}</span>
          </div>
          <div class="card-item-num">{{ filterNum(item.num) }}</div>
        </div>
      </div>
    </a-card>
    <a-card>
      <div class="home-charts">
        <div class="home-charts-left">
          <span class="home-title">红黑名单类型分布</span>
          <div class="left-box">
            <div class="left-box-list">
              <div class="list-item">
                <span>名单总数量(条)</span>
                <span>{{ leftNum1 }}</span>
              </div>
              <div class="list-item">
                <span>红名单数量(条)</span>
                <span>{{ leftNum2 }}</span>
              </div>
              <div class="list-item">
                <span>黑名单数量(条)</span>
                <span>{{ leftNum3 }}</span>
              </div>
            </div>
            <a-charts :option="leftCharts"></a-charts>
          </div>
        </div>
        <div class="home-charts-right">
          <span class="home-title">各部门措施及反馈情况统计</span>
          <a-charts :option="rightCharts"></a-charts>
        </div>
      </div>
    </a-card>
    <a-card>
      <span class="home-title">服务调用报表统计</span>
      <a-table :data="data" :head="head"> </a-table>
      <a-pagination ref="paginationElement" :total="total" :change="getTableData"></a-pagination>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getData, getLeftData, getRightData, tableData } from '../../api/home'
import { getLeftCharts, getRightCharts } from './charts'

interface HOME {}

const data = ref<HOME[]>([])
const head = ref([
  { prop: 'deptName', label: '部门名称' },
  { prop: 'memorandumCount', label: '关联备忘录数量' },
  { prop: 'matterCount', label: '关联名单类型数量' },
  { prop: 'measureCount', label: '关联措施数量' },
  { prop: 'feedbackCount', label: '协同执行反馈次数' }
])
const total = ref(0)

function getTableData(page: number, size: number) {
  tableData<HOME>(page, size).then(({ data: result }) => {
    data.value = result.records
    total.value = result.total
  })
}

function filterNum(num: number) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

const list = ref([
  { title: '红名单备忘录总数', num: 0 },
  { title: '黑名单备忘录总数', num: 0 },
  { title: '措施总数', num: 0 },
  { title: '措施反馈总数', num: 0 },
  { title: '接口调用总数', num: 0 }
])

const leftCharts = ref({})
const leftNum1 = ref(0)
const leftNum2 = ref(0)
const leftNum3 = ref(0)
const rightCharts = ref({})

getData<{
  blackMemorandumTotal: {
    memorandumName: string
    memorandumTotal: number
  }
  interfaceTotal: {
    interfaceCallName: string
    interfaceCallTotal: number
  }
  measureCallTotal: {
    measurefeedbackName: string
    measurefeedbackTotal: number
  }
  measureTotal: {
    measureName: string
    measureTotal: number
  }
  redMemorandumTotal: {
    memorandumName: string
    memorandumTotal: number
  }
}>().then(({ data: result }) => {
  list.value[0].num = result.redMemorandumTotal.memorandumTotal
  list.value[1].num = result.blackMemorandumTotal.memorandumTotal
  list.value[2].num = result.measureTotal.measureTotal
  list.value[3].num = result.measureCallTotal.measurefeedbackTotal
  list.value[4].num = result.interfaceTotal.interfaceCallTotal
})

onMounted(() => {
  getLeftData<{
    blackzb: string
    redzb: string
    count: number
    redcount: number
    balckcount: number
  }>().then(({ data: result }) => {
    leftNum1.value = result.count
    leftNum2.value = result.redcount
    leftNum3.value = result.balckcount
    const charts = getLeftCharts()
    charts.series[0].data = [
      { name: '红名单总数', value: parseFloat(result.redzb) },
      { name: '黑名单总数', value: parseFloat(result.blackzb) }
    ]
    leftCharts.value = charts
  })

  getRightData<{ deptname: string; cstotal: number }[]>().then(({ data: result }) => {
    const charts = getRightCharts()

    charts.xAxis.data = result.map((item) => item.deptname)
    charts.series[0].data = result.map((item) => {
      return item.cstotal
    })
    rightCharts.value = charts
  })
})
</script>

<style lang="scss">
.home-title {
  font-size: $font-size-title;
  color: $theme;
  font-weight: bold;
  margin-bottom: $margin-large;
  display: flex;
  align-items: center;
  gap: 0 3px;
}
.home {
  &-preview {
    &-card {
      width: 100%;
      display: flex;
      gap: 0 10px;
      .card-item {
        width: 20%;
        border-radius: $border-radius-small;
        background-color: #f6f8fa;
        padding: $padding-large $padding;
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
        overflow: hidden;
        &-title {
          font-size: $font-size-small;
          display: flex;
          align-items: center;
        }
        &-num {
          font-size: $font-size-small;
          margin-top: $margin-large;
          font-size: calc($font-size-large * 1.3);
          font-weight: bold;
          letter-spacing: 1px;
        }
      }
    }
  }
  &-charts {
    width: 100%;
    display: flex;
    align-items: center;
    &-left,
    &-right {
      width: 50%;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      .a-charts {
        width: 100%;
        height: 400px;
      }
      .left-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        &-list {
          display: flex;
          flex-direction: column;
          font-size: 12px;
          font-weight: bold;
          .list-item {
            width: 200px;
            display: flex;
            flex-direction: column;
            text-align: center;
            span:last-child {
              margin-bottom: 20px;
              font-size: 30px;
            }
          }
        }
      }
    }
  }
}
</style>
